<!DOCTYPE html>
<html lang="en">
<head>
  <title>MicroCity Web</title>
  <meta charset="UTF-8"/>
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate, max-age=0"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/svg+xml" href="/img/favicon.svg"/>
  <link rel="stylesheet" type="text/css" href="/css/style.css"/>
  <link rel="modulepreload" href="/js/worker.module.js"/>
  <script src="/js/echarts.min.js"></script>
	<script src = "/js/ace.min.js"></script>
	<script src = "/js/theme-nord_dark.js"></script>
	<script src = "/js/mode-lua.js"></script>
	<script src = "/js/ext-language_tools.js"></script>
  <script src = "/js/drawdown.js"></script>
  <script src="/js/app.js" type="module"></script>
</head>
<body>
<div id="container">
<div id="header">
    <div id="logo" title="New Window"><a href="javascript:void(0);" onclick="window.open(location.href, '_blank');">MicroCity</a><span> Web</span></div>
    <div id="commandbar">
        <div id="play"     class="button" style = "filter:invert(50%); pointer-events:none;" title="Run/Debug">     <img src="img/play.svg" alt="play"/>      </div>
        <div id="pause"    class="button" style = "filter:invert(50%); pointer-events:none;" title="Pause">		     <img src="img/pause.svg" alt="pause"/>    </div>
        <div id="stop"     class="button" style = "filter:invert(50%); pointer-events:none;" title="Stop/Kill">		 <img src="img/stop.svg" alt="stop"/>      </div>
        <div id="code"     class="button" style = "filter:invert(50%); pointer-events:none;" title="Show Code">     <img src="img/code.svg" alt="code"/>      </div>
        <div id="new"  	   class="button" style = "filter:invert(50%); pointer-events:none;" title="New/Clear">     <img src="img/new.svg" alt="new"/>        </div>
        <div id="open" 	   class="button" style = "filter:invert(50%); pointer-events:none;" title="Open/Upload">   <img src="img/open.svg" alt="open"/>      </div>
        <div id="save" 	   class="button" style = "filter:invert(50%); pointer-events:none;" title="Save/Download">  <img src="img/save.svg" alt="save"/>      </div>
        <div id="pub"      class="button" style = "filter:invert(50%); pointer-events:none;" title="Publish/Embed">	 <img src="img/publish.svg" alt="publish"/></div>
    </div>
    <div id="doc" class="button" title="Documentation">  <img src="img/doc.svg" alt="doc"/>  </div>
  </div>
  <div id="editor"></div>
  <div id="scene">
    <div id="docframe"></div>
    <div id="chartframe" class="hidden">
      <div id="chart-header">
        <p id="chart-title">Charts</p>
      </div>
      <div id="chart-content">
      </div>
      <div id="handle-horizontal"></div>
      <div id="handle-vertical"></div>
    </div>
    <canvas id="offcanvas"></canvas>
  </div>
  <div id="footer">
    <div id="debugwatch"></div>
    <div id="statusbar">
      <span style = "color:lightgray;">state: </span><span id="state"></span><br/>
      <span style = "color:lightgray;">version: </span><span id="version"></span>
    </div>
  </div>
</div>
<dialog id="newdialog">
  <div class="dialogtitle">New Code<span id="newclose" class="dialogclose">✖</span></div>
  <div class="newcodecontainer">
  <img class="newcode" src="/img/blank.png" alt="" title="Blank" data="/lua/blank.lua"/>
  <img class="newcode" src="/img/startup.png" alt="" title="Startup: A Rolling Cube" data="/lua/startup.lua"/>
  <img class="newcode" src="/img/world.png" alt="" title="The World Countries" data="/lua/geojson.lua"/>
  <img class="newcode" src="/img/earth.png" alt="" title="The Spherical Earth" data="/lua/earth.lua"/>
  <img class="newcode" src="/img/warehouse.png" alt="" title="Warehouse" data="/lua/warehouse.lua"/>
  <img class="newcode" src="/img/ct.png" alt="" title="Container Terminal" data="/lua/ct.lua"/>
  <img class="newcode" src="/img/chart.png" alt="" title="Container Terminal" data="/lua/echarts.lua"/>
  </div>
</dialog>
<dialog id="downdialog">
  <div class="dialogtitle">Download<span id="downclose" class="dialogclose">✖</span></div>
  <div class="downcontainer">
  <table id="downfiletable" class="downfiletable">
    <thead>
    <tr style = "background-color: lightgray;">
      <td>File Name</td>
      <td style="width: 150px;">Last Modified</td>
      <td style="width: 150px;">Size</td>
    </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  </div>
  </div>
</dialog>
</body>
</html>